<template>
  <el-table
    :data="emails"
    style="width: 100%"
    @row-click="handleRowClick"
    @selection-change="$emit('selection-change', $event)"
    :row-class-name="tableRowClassName"
  >
    <el-table-column type="selection" width="40" />
    <el-table-column prop="sender" label="发件人" width="220">
      <template #default="{ row }">
        <div class="sender-cell">
          <el-icon class="envelope-icon">
            <Message :color="row.read ? '#909399' : '#409eff'" />
          </el-icon>
          <span :class="{ 'unread': !row.read, 'important': row.important }">
            {{ row.sender }}
          </span>
        </div>
      </template>
    </el-table-column>
    <el-table-column prop="subject" label="主题">
      <template #default="{ row }">
        <div class="subject-cell">
          <span :class="{ 'unread': !row.read, 'important': row.important }">
            {{ row.subject }}
          </span>
          <span v-if="row.important" class="important-tag">重要</span>
          <span v-if="row.attachments" class="attachment-tag">
            <el-icon><Paperclip /></el-icon>
          </span>
        </div>
      </template>
    </el-table-column>
    <el-table-column prop="time" label="时间" width="120" align="right">
      <template #default="{ row }">
        <div class="time-cell">
          <span :class="{ 'unread': !row.read }">{{ row.time }}</span>
          <el-icon
            v-if="row.starred"
            color="#F7BA2A"
            @click.stop="toggleStar(row)"
            class="star-icon"
          >
            <StarFilled />
          </el-icon>
          <el-icon
            v-else
            @click.stop="toggleStar(row)"
            class="star-icon"
          >
            <Star />
          </el-icon>
        </div>
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup>
import { Message, Star, StarFilled, Paperclip } from '@element-plus/icons-vue';

const props = defineProps({
  emails: {
    type: Array,
    required: true
  }
});

const emit = defineEmits(['row-click', 'selection-change']);

const tableRowClassName = ({ row }) => {
  return row.read ? 'read-row' : 'unread-row';
};

const handleRowClick = (row) => {
  emit('row-click', row);
};

const toggleStar = (row) => {
  row.starred = !row.starred;
};
</script>

<style lang="scss" scoped>
.el-table {
  :deep(.unread-row) {
    .unread {
      font-weight: bold;
      color: #303133;
    }
  }

  :deep(.read-row) {
    color: #909399;
  }

  .sender-cell {
    display: flex;
    align-items: center;
    gap: 8px;

    .envelope-icon {
      font-size: 16px;
    }
  }

  .subject-cell {
    display: flex;
    align-items: center;
  }

  .time-cell {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;

    .star-icon {
      cursor: pointer;
      font-size: 16px;
      &:hover {
        opacity: 0.8;
      }
    }
  }

  .important {
    color: #e6a23c;
  }

  .important-tag {
    margin-left: 8px;
    padding: 2px 6px;
    background-color: #fdf6ec;
    color: #e6a23c;
    border-radius: 4px;
    font-size: 12px;
  }

  .attachment-tag {
    margin-left: 8px;
    color: #909399;
  }
}
</style>
